import React, { Component } from 'react';

import "./index.css";

export default class Item extends Component {
	state={
		mouse:false
	};

	// 处理鼠标悬浮事件监听
	handleMouse=(flag)=>{
		return ()=>{
			this.setState({
				mouse:flag
			});
		};
	};
	// 改变复选框事件监听
	changeCheckbox=(id)=>{
		return (event)=>{
			// console.log(id,event.target.checked);
			this.props.changeTodo(id,event.target.checked);
		};
	};

	// 删除按钮事件监听
	handleDelete=(id)=>{
		// console.log(id);
		if(window.confirm("确定要删除吗？")){
			this.props.deleteTodo(id);
		};
	};

	render() {
		const {id,name,done} = this.props;
		const {mouse} =this.state;
		return (
			<li onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)}
				style={{backgroundColor:mouse?"#ddd":"#fff"}}
			>
				<label>
					<input type="checkbox" checked={done || false} onChange={this.changeCheckbox(id)} />
					<span>{name}</span>
				</label>
				<button className="btn btn-danger" style={{ display: mouse?"inline-block":"none" }}
					onClick={()=>{this.handleDelete(id)}}
				>删除</button>
			</li>
		)
	}
}
